import Taro, {Component, Config} from '@tarojs/taro'
import { Image, View } from '@tarojs/components'
import './index.scss'
import { OSS } from "@/config/config"
import classNames from 'classnames'
import { getScorePage, getUserScore } from '@/api/userApi'
import { formatTime, showEmpty } from '@/utils/utils'
import { INTEGRAL_TYPE_NAME } from '@/config/types'
import { toHomePage, toIntegralCheckinPage } from '@/utils/page_router'
import {EmptyData, Loading, LoadMore} from '@/components/index'
import { getBrand } from '@/utils/storage'



export default class Index extends Component {
  state: any
  config: Config = {
    backgroundTextStyle: "dark",
    navigationBarTitleText: `${getBrand()}详情`,
    navigationBarTextStyle: process.env.navigationBarTextStyle,
    navigationBarBackgroundColor: process.env.backgroundColor
  }

  constructor() {
    super(...arguments)
    this.state = {
      loading: true,
      typeKey: 0,
      page: 1,
      limit: 15,
      dataList: [],
      scoreInfo: {},
      loadStatus: 'loading',
    }
  }

  async componentWillMount() {
    await this.getPage()
    await this.getSignScore()
  }

  //  监听用户上拉触底事件
  onReachBottom(){
    this.getPage()
  }

  //  分页获取优惠券
  getPage() {
    const { page, limit, dataList, loadStatus } = this.state
    if (loadStatus === 'noMore') {
      return
    }
    getScorePage({ page, limit }).then(res => {
      const { list, totalCount } = res.data
      this.setState({
        page: page+1,
        dataList: page===1 ? list : dataList.concat(list),
        loadStatus: (page * limit >= totalCount) ? 'noMore' : 'loading',
      })
    })
  }

  //  获取统计数据
  getSignScore() {
    getUserScore().then(res => {
      this.setState({
        scoreInfo: res.data
      }, () => {
        this.setState({
          loading: false
        })
      })
    })
  }

  //  切换类型
  onSwitchType(k) {
    this.setState({
      typeKey: k
    })
  }

  render() {
    const { loading, typeKey, dataList, loadStatus, scoreInfo } = this.state
    return (<View className='integral-page'>
      {loading && <Loading/>}
      <View className='integral-scroll'>
        <View className='integral-header'>
          <View className='current-box f-g-5 f-d-c'>
            <View className='current-text'>当前{getBrand()}</View>
            <View className='current-num bnn-number'>{scoreInfo.totalScore}</View>
            <View className='current-line'/>
          </View>
          <View className='list d-f'>
            <View className='list-item f-g-5 f-d-c'>
              <View className='item-num bnn-number'>{scoreInfo.totalGet}</View>
              <View className='item-text'>累计{getBrand()}</View>
            </View>
            <View className='list-item f-g-5 f-d-c'>
              <View className='item-num bnn-number'>{scoreInfo.totalCost}</View>
              <View className='item-text'>累计消耗</View>
            </View>
            <View className='list-item f-g-5 f-d-c'>
              <View className='item-num bnn-number'>{scoreInfo.todayGet}</View>
              <View className='item-text'>今日获取</View>
            </View>
          </View>
          <View className='nav-list d-f'>
            <View className={classNames('nav-item f-g-5', typeKey === 0 && 'active')} onClick={this.onSwitchType.bind(this, 0)}>
              <Image src={`${OSS}/system/image/icon_integral_list.png`} className='nav-icon'/>
              <View className='nav-text'>分值明细</View>
            </View>
            <View className={classNames('nav-item f-g-5', typeKey === 1 && 'active')} onClick={this.onSwitchType.bind(this, 1)}>
              <Image src={`${OSS}/system/image/icon_remind.png`} className='nav-icon'/>
              <View className='nav-text'>分值提升</View>
            </View>
          </View>
        </View>
        {typeKey === 0 && <View className='integral-body'>
          <View className='prompt-box f-g-4'>
            <View className='prompt-icon bnn-icon'>&#xe6e4;</View>
            <View className='prompt-text t-o-e'>提示：{getBrand()}不仅可以抵现还可以兑换商品</View>
          </View>
          <View className='integral-list'>
            {dataList.map((i, k) => {
              return (<View key={k} className='integral-item thin-border__b d-f a-i-c j-c-b'>
                <View className='integral-left'>
                  <View className='integral-title'>{INTEGRAL_TYPE_NAME[i.type]}</View>
                  <View className='integral-time'>{formatTime(i.createdAt)}</View>
                </View>
                <View className='integral-right'>
                  {i.score > 0 && <View className='integral-num bnn-number integral-plus'>+{i.score}</View>}
                  {i.score < 0 && <View className='integral-num bnn-number integral-minus'>{i.score}</View>}
                </View>
              </View>)
            })}
          </View>
          {/*<View className='load-more'>*/}
          {/*  <LoadMore status={loadStatus}/>*/}
          {/*</View>*/}
          {!showEmpty(dataList, loadStatus) && <LoadMore status={loadStatus}/>}
          {showEmpty(dataList, loadStatus) && <View className='list-empty'><EmptyData/></View>}
        </View>}

        {typeKey === 1 && <View className='integral-body'>
          <View className='promote-list'>
            <View className='promote-item d-f f-g-4'>
              <View className='img-box f-g-5'>
                <Image src={`${OSS}/system/image/icon_gift.png`} className='promote-img'/>
              </View>
              <View className='promote-title'>购买商品可获得{getBrand()}奖励</View>
              <View className='promote-btn thin-border f-g-5' hoverClass='hover-class--btn' onClick={() => toHomePage()}>赚{getBrand()}</View>
            </View>
            <View className='promote-item d-f f-g-4'>
              <View className='img-box f-g-5'>
                <Image src={`${OSS}/system/image/icon_sign.png`} className='promote-img'/>
              </View>
              <View className='promote-title'>每日签到可获得{getBrand()}奖励</View>
              <View className='promote-btn thin-border f-g-5' hoverClass='hover-class--btn' onClick={() => toIntegralCheckinPage()}>赚{getBrand()}</View>
            </View>
          </View>
        </View>}
      </View>
    </View>)
  }
}
